<template>
	<view>
		<view class="wrap">
			<view class="total" :class="{ select: true, active: item.id === sel }" v-for="(item,index) in tabs" :key="index"
			 @click="select(item)">{{ item.label }}</view>
		</view>
		<!-- 用车 -->
		<view class="warp-use" v-if="sel==1">
			<view class="warp-use-chose">
				<text>订单状态：</text>
				<ms-dropdown-item v-model="value1" :list="list" @tap="chose(value1)"></ms-dropdown-item>
			</view>
			<!-- 全部 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==0" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text class="content-top-name">{{item.name}}</text>
						<view class="content-top-img" v-if="item.state=='已取消'">
							<image :src="confirm" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='待确认'">
							<image :src="unConfirm" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='已确认'">
							<image :src="ensure" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='已完成'">
							<image :src="finish" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button" v-if="item.state=='已完成'">
					<view class="line"></view>
					<view class="content-button-text">
						<text @tap="allevaluate">评价</text>
						<uni-popup type="center" ref="allevaluatepopup">
							<view class="changepopup3">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">

									</view>
									<text>车辆评分</text>
									<view class="changepopup-top2-image" @tap="closeallevaluate">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<uni-rate v-model="value" margin="10" allow-half :max="5" color="#D6D6D6" active-color="#B6914E" @change="onChange" />
								<view class="evaluate-button" @tap="closeallevaluate">
									<text>确认</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
				<view class="content-button" v-if="item.state=='待确认'">
					<view class="line"></view>
					<view class="content-button-text">
						<text @tap="allcloseorder">取消订单</text>
						<uni-popup type="center" ref="allcloseorderpopup">
							<view class="allcloseorderpopup">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">
									</view>
									<text>确认取消订单</text>
									<view class="changepopup-top2-image" @tap="allcloseorderpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="close-order-botton">
									<text @tap="allcloseorderpopup" class="cancel">取消</text>
									<text @tap="ensureallcloseorderpopup" class="succeed">确认</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==4&&item.state=='已取消'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="confirm" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
			</view>
			<!-- 待确认 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==1&&item.state=='待确认'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="unConfirm" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button">
					<view class="line"></view>
					<view class="content-button-text">
						<text @tap="closeorder">取消订单</text>
						<uni-popup type="center" ref="closeorderpopup">
							<view class="allcloseorderpopup">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">
									</view>
									<text>确认取消订单</text>
									<view class="changepopup-top2-image" @tap="closeorderpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="close-order-botton">
									<text @tap="closeorderpopup" class="cancel">取消</text>
									<text @tap="ensurecloseorderpopup" class="succeed">确认</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<!-- 已确认 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==2&&item.state=='已确认'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="ensure" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==3&&item.state=='已完成'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="finish" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button">
					<view class="line"></view>
					<view class="content-button-text">
						<text @tap="evaluate">评价</text>
						<uni-popup type="center" ref="evaluatepopup">
							<view class="changepopup3">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">

									</view>
									<text>车辆评分</text>
									<view class="changepopup-top2-image" @tap="closeevaluate">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<uni-rate v-model="value" margin="10" allow-half :max="5" color="#D6D6D6" active-color="#B6914E" @change="onChange" />
								<view class="evaluate-button" @tap="closeevaluate">
									<text>确认</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
		</view>
		<!-- 供车 -->
		<view class="warp-use" v-if="sel==2">
			<view class="warp-use-chose">
				<text>订单状态：</text>
				<ms-dropdown-item v-model="value1" :list="list" @tap="chose(value1)"></ms-dropdown-item>
			</view>
			<!-- 全部 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==0" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text class="content-top-name">{{item.name}}</text>
						<view class="content-top-img" v-if="item.state=='已取消'">
							<image :src="confirm" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='待确认'">
							<image :src="unConfirm" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='已确认'">
							<image :src="ensure" mode=""></image>
						</view>
						<view class="content-top-img" v-if="item.state=='已完成'">
							<image :src="finish" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button" v-if="item.state=='待确认'">
					<view class="line"></view>
					<view class="content-button-text">
						<text class="button-left" @tap="allnumberpopup">查看联系方式</text>
						<uni-popup type="center" ref="allnumberpopup">
							<view class="changepopup2">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">

									</view>
									<text>需求方昵称</text>
									<view class="changepopup-top2-image" @tap="closeallnumberpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="changepopup-mid2">
									<text>12345678910</text>
								</view>
							</view>
						</uni-popup>
						<text @tap="allopen(item)">订单操作</text>
						<uni-popup type="center" ref="allchangepopup">
							<view class="changepopup">
								<view class="changepopup-top">
									<text>确认订单</text>
									<image @tap="allchangepopupclose" :src="close" mode=""></image>
								</view>
								<view class="changepopup-mid">
									<image :src="hint" mode=""></image>
									<text>该订单预约成功了吗？</text>
								</view>
								<view class="mid-changetime">
									<text>修改日期</text>
								</view>
								<view class="mid-time">
									<view class="mid-time-left">
										<picker class="uni-input" mode="date" :value="startdate" :start="startDate" @change="startbindDateChange">
											<view>{{startdate}}</view>
										</picker>
									</view>
									<view class="mid-mid">
										<view></view>
									</view>
									<view class="mid-time-right">
										<picker class="uni-input" mode="date" :value="enddate" :end="endDate" @change="endbindDateChange">
											<view>{{enddate}}</view>
										</picker>
									</view>
								</view>
								<view class="botton">
									<text class="cancel" @tap="allcloseofferorderpopupopen">取消订单</text>

									<text class="succeed" @tap="allsurepopupopen">预约成功</text>
								</view>
							</view>
						</uni-popup>
						<uni-popup type="center" ref="allcloseofferorderpopup">
							<view class="changepopup2">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">
									</view>
									<text>确认取消订单</text>
									<view class="changepopup-top2-image" @tap="allcloseofferorderpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="close-order-botton">
									<text @tap="allcloseofferorderpopup" class="cancel">取消</text>
									<text @tap="ensureallcloseofferorderpopup" class="succeed">确认</text>
								</view>
							</view>
						</uni-popup>
						<uni-popup type="center" ref="allsurepopup">
							<view class="changepopup">
								<view class="changepopup-top1">
									<text>确认供车订单</text>
									<image @tap="allsurepopupclose" :src="close" mode=""></image>
								</view>
								<view class="changepopup-mid1">
									<image :src="hint" mode=""></image>
									<text>提示：请仔细核对日期等信息</text>
								</view>
								<view class="botton1">
									<text @tap="allsurepopupclose" class="cancel">取消</text>
									<text @tap="allsurepopupsubmit" class="succeed">提交</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==4&&item.state=='已取消'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="confirm" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
			</view>
			<!-- 待确认 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==1&&item.state=='待确认'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="unConfirm" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button">
					<view class="line"></view>
					<view class="content-button-text">
						<text @tap="numberpopup" class="button-left">查看联系方式</text>
						<uni-popup type="center" ref="numberpopup">
							<view class="changepopup2">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">

									</view>
									<text>需求方昵称</text>
									<view class="changepopup-top2-image" @tap="closenumberpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="changepopup-mid2">
									<text>12345678910</text>
								</view>
							</view>
						</uni-popup>
						<text @tap="open(item)">订单操作</text>
						<uni-popup type="center" ref="changepopup">
							<view class="changepopup">
								<view class="changepopup-top">
									<text>确认订单</text>
									<image @tap="changepopupclose" :src="close" mode=""></image>
								</view>
								<view class="changepopup-mid">
									<image :src="hint" mode=""></image>
									<text>该订单预约成功了吗？</text>
								</view>
								<view class="mid-changetime">
									<text>修改日期</text>
								</view>
								<view class="mid-time">
									<view class="mid-time-left">
										<picker class="uni-input" mode="date" :value="startdate" :start="startDate" @change="startbindDateChange">
											<view>{{startdate}}</view>
										</picker>
									</view>
									<view class="mid-mid">
										<view></view>
									</view>
									<view class="mid-time-right">
										<picker class="uni-input" mode="date" :value="enddate" :end="endDate" @change="endbindDateChange">
											<view>{{enddate}}</view>
										</picker>
									</view>
								</view>
								<view class="botton">
									<text class="cancel" @tap="closeofferorderpopupopen">取消订单</text>
									<text class="succeed" @tap="surepopupopen">预约成功</text>
								</view>
							</view>
						</uni-popup>
						<uni-popup type="center" ref="closeofferorderpopup">
							<view class="changepopup2">
								<view class="changepopup-top2">
									<view class="changepopup-top2-image">
									</view>
									<text>确认取消订单</text>
									<view class="changepopup-top2-image" @tap="closeofferorderpopup">
										<image :src="close" mode=""></image>
									</view>

								</view>
								<view class="close-order-botton">
									<text @tap="closeofferorderpopup" class="cancel">取消</text>
									<text @tap="ensurecloseofferorderpopup" class="succeed">确认</text>
								</view>
							</view>
						</uni-popup>
						<uni-popup type="center" ref="surepopup">
							<view class="changepopup">
								<view class="changepopup-top1">
									<text>确认供车订单</text>
									<image @tap="surepopupclose" :src="close" mode=""></image>
								</view>
								<view class="changepopup-mid1">
									<image :src="hint" mode=""></image>
									<text>提示：请仔细核对日期等信息</text>
								</view>
								<view class="botton1">
									<text @tap="surepopupclose" class="cancel">取消</text>
									<text @tap="surepopupsubmit" class="succeed">提交</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<!-- 已确认 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==2&&item.state=='已确认'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="ensure" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="content" v-for="(item,index) in useOrderlist" v-if="state==3&&item.state=='已完成'" :key="index">
				<view class="content-top">
					<view class="content-top-left">
						<text>{{item.name}}</text>
						<view class="content-top-img">
							<image :src="finish" mode=""></image>
						</view>
					</view>
					<view class="content-top-money">
						<text>{{item.money}}</text>
					</view>
				</view>
				<view class="content-time">
					<text>{{item.time}}</text>
				</view>
				<view class="content-mid">
					<text>{{item.color}}</text>
					<text>{{item.gas}}</text>
					<text>{{item.distend}}</text>
					<text>{{item.place}}</text>
					<text>{{item.year}}</text>
				</view>
				<view class="content-button">
					<view class="line"></view>
					<view class="content-button-text">
						<text>评价</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apis from '../../api.js'
	import request from '../../requst.js' //引进requst方法
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import icons from "../../common/icons.js"
	export default {
		components: {
			msDropdownMenu,
			msDropdownItem,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniRate
		},
		data() {
			const startcurrentDate = this.getDate({
				format: true
			})
			const endcurrentDate = this.getDate({
				format: true
			})
			return {
				sel: 1,
				state: 0,
				tabs: [{
						label: "用车订单",
						id: 1
					},
					{
						label: "供车订单",
						id: 2
					}
				],
				list: [{
						text: '全部',
						value: 0
					},
					{
						text: '待确认',
						value: 1
					},
					{
						text: '已确认',
						value: 2
					},
					{
						text: '已完成',
						value: 3
					},
					{
						text: '已取消',
						value: 4
					}
				],
				value1: 0,
				useOrderlist: [{
						name: '法拉利458',
						state: '待确认',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '￥1500'
					},
					{
						name: '法拉利488',
						state: '已确认',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '￥1500'
					},
					{
						name: '法拉利F12',
						state: '已完成',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '￥1500'
					},
					{
						name: '法拉利F12',
						state: '已取消',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '￥1500'
					},
				],
				startdate: startcurrentDate,
				enddate: '还车日期',
				value: 0,
				confirm:icons.icons.tagConfirmed,
				ensure:icons.icons.tagEnsure,
				finish:icons.icons.tagFinish,
				unConfrim:icons.icons.tagUnconfirmed,
				close:icons.icons.close,
				hint:icons.icons.hint,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			console.log(this.state)
			request({
				url: "qijian/order/useCarOrder",
				method: 'POST',
				success: function(res) {
					console.log(res);
					if(res.data.code==401){
						uni.showToast({
							title:'登录过期，请重新登录'
						})
						uni.reLaunch({
							url:'../login/login'
						})
					}
				}
			}),
			request({
				url: "qijian/order/provideOrder",
				method: 'GET',
				success: function(res) {
					console.log(res);
					if(res.data.code==401){
						uni.showToast({
							title:'登录过期，请重新登录'
						})
						uni.reLaunch({
							url:'../login/login'
						})
					}
				}
			})
			// apis.useCarOrder({

			// 	}).then(res => {
			// 		console.log(res)
			// 	}),
			// 	apis.provideOrder({

			// 	}).then(res => {
			// 		console.log(res)
			// 	})
		},
		// onShow() {
		// 	// request({
		// 	// 	url: "qijian/order/useCarOrder",
		// 	// 	method: 'POST',
		// 	// 	success: function(res) {
		// 	// 		console.log(res);
		// 	// 	}
		// 	// }),
		// 	// request({
		// 	// 	url: "qijian/order/provideOrder",
		// 	// 	method: 'GET',
		// 	// 	success: function(res) {
		// 	// 		console.log(res);
		// 	// 	}
		// 	// })
		// },
		methods: {
			select(item) {
				this.sel = item.id;
				console.log(this.sel)
			},
			chose(e) {
				console.log(e)
				var that = this
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].value == e) {
						that.state = this.list[i].value
						console.log(that.state)
					}
				}
			},
			startbindDateChange: function(e) {
				// console.log(e)
				this.startdate = e.target.value
			},
			endbindDateChange: function(e) {
				// console.log(e)
				this.enddate = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			open(e) {
				console.log(e)
				this.$refs.changepopup[0].open()
			},
			allopen(e) {
				console.log(e)
				this.$refs.allchangepopup[0].open()
			},
			allsurepopupopen() {
				this.$refs.allsurepopup[0].open()
				this.$refs.allchangepopup[0].close()
			},
			surepopupopen() {
				this.$refs.surepopup[0].open()
				this.$refs.changepopup[0].close()
			},
			allnumberpopup() {
				this.$refs.allnumberpopup[0].open()
			},
			closeallnumberpopup() {
				this.$refs.allnumberpopup[0].close()
			},
			evaluate() {
				this.$refs.evaluatepopup[0].open()
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			allcloseorder() {
				this.$refs.allcloseorderpopup[0].open()
			},
			allcloseorderpopup() {
				this.$refs.allcloseorderpopup[0].close()
			},
			ensureallcloseorderpopup() {
				this.$refs.allcloseorderpopup[0].close()
			},
			allevaluate() {
				this.$refs.allevaluatepopup[0].open()
			},
			closeallevaluate() {
				this.$refs.allevaluatepopup[0].close()
			},
			closeevaluate() {
				this.$refs.evaluatepopup[0].close()
			},
			closeorder() {
				this.$refs.closeorderpopup[0].open()
			},
			closeorderpopup() {
				this.$refs.closeorderpopup[0].close()
			},
			ensurecloseorderpopup() {
				this.$refs.closeorderpopup[0].close()
			},
			allcloseofferorderpopupopen() {
				this.$refs.allcloseofferorderpopup[0].open()
				this.$refs.allchangepopup[0].close()

			},
			allcloseofferorderpopup() {
				this.$refs.allcloseofferorderpopup[0].close()
			},
			ensureallcloseofferorderpopup() {
				this.$refs.allcloseofferorderpopup[0].close()
			},
			allsurepopupclose() {
				this.$refs.allsurepopup[0].close()
			},
			allsurepopupsubmit() {
				this.$refs.allsurepopup[0].close()
			},
			numberpopup() {
				this.$refs.numberpopup[0].open()
			},
			closenumberpopup() {
				this.$refs.numberpopup[0].close()
			},
			closeofferorderpopupopen() {
				this.$refs.closeofferorderpopup[0].open()
				this.$refs.changepopup[0].close()

			},
			closeofferorderpopup() {
				this.$refs.closeofferorderpopup[0].close()
			},
			ensurecloseofferorderpopup() {
				this.$refs.allcloseofferorderpopup[0].close()
			},
			allchangepopupclose() {
				this.$refs.allchangepopup[0].close()
			},
			changepopupclose() {
				this.$refs.changepopup[0].close()
			},
			surepopupclose() {
				this.$refs.surepopup[0].close()
			},
			surepopupsubmit() {
				this.$refs.surepopup[0].close()
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped>
	.wrap {
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #FFFFFF;
		color: #666666;
	}

	.select.active {
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #FFFFFF;
		color: #000000;
		border-bottom: 4rpx solid #000000;
	}

	.warp-use-chose {
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #F5F5F5;
		align-items: center;
	}

	.warp-use-chose>text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-left: 32rpx;
	}

	image {
		width: 90rpx;
		height: 32rpx;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.content-top {
		width: 686rpx;
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.content-top-left {
		display: flex;
	}

	.content-top-name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #292929;
	}

	.content-top-img {
		margin-left: 24rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content-top-money {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #B6914E;
	}

	.content-time {
		width: 686rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #292929;
		padding-top: 28rpx;
	}

	.content-mid {
		width: 686rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.content-mid>text {
		padding-top: 28rpx;
		margin-right: 48rpx;
	}

	.line {
		width: 686rpx;
		height: 1rpx;
		background-color: #F4F4F4;

	}

	.content-button {
		width: 686rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content-button-text {
		width: 686rpx;
		display: flex;
		justify-content: flex-end;
		padding: 16rpx 0;
	}

	.content-button-text>text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B6914E;
		border-radius: 24rpx;
		border: 2rpx solid #B6914E;
		padding: 14rpx 32rpx;
	}

	.button-left {
		margin-right: 20rpx;
	}

	.mid-time {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 5%;
		margin-top: 24rpx;
	}

	.mid-time-left {
		width: 45%;
		height: 66rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}

	.mid-time-right {
		width: 45%;
		height: 66rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}

	.mid-mid {
		width: 10%;
		display: flex;
		height: 66rpx;
		justify-content: center;
		align-items: center;

	}

	.mid-mid>view {
		width: 16rpx;
		height: 2rpx;
		background-color: #979797;
	}

	.changepopup {
		width: 640rpx;
		height: 522rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.changepopup-top {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 36rpx;
	}

	.changepopup-top1 {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 36rpx;
	}

	.changepopup-top2 {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 36rpx;
		justify-content: center;
	}

	.changepopup2 {
		width: 640rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.changepopup3 {
		width: 640rpx;
		height: 440rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.changepopup-top2>text {
		width: 80%;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
	}

	.changepopup-top>text {
		margin-left: 248rpx;
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.changepopup-top1>text {
		margin-left: 208rpx;
		width: 216rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.changepopup-top>image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 180rpx;
	}

	.changepopup-top1>image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 140rpx;
	}

	.changepopup-top2-image>image {
		width: 28rpx;
		height: 28rpx;
	}

	.changepopup-top2-image {
		width: 10%;
	}

	.changepopup-mid {
		width: 100%;
		margin-top: 40rpx;
	}

	.changepopup-mid>text {
		width: 282rpx;
		height: 36rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.changepopup-mid>image {
		width: 32rpx;
		height: 32rpx;
		margin-left: 40rpx;
		margin-right: 12rpx;
	}

	.changepopup-mid1 {
		width: 100%;
		margin-top: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.changepopup-mid2 {
		width: 100%;
		margin-top: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.changepopup-mid1>text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.changepopup-mid1>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.mid-changetime {
		width: 100%;
		margin-top: 48rpx;
	}

	.mid-changetime>text {
		width: 144rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		margin-left: 40rpx;
	}

	.botton {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 48rpx;
	}

	.botton1 {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 116rpx;
	}

	.cancel {
		width: 240rpx;
		height: 88rpx;
		background: #E4E4E4;
		border-radius: 24rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		text-align: center;
		line-height: 88rpx;
		margin-left: 60rpx;
	}

	.succeed {
		width: 240rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		text-align: center;
		line-height: 88rpx;
		margin-left: 40rpx;
	}

	.evaluate-button {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
	}

	.evaluate-button>text {
		width: 560rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		line-height: 88rpx;
		text-align: center;
	}

	.allcloseorderpopup {
		width: 640rpx;
		height: 300rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.close-order-botton {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 80rpx;
	}
</style>
